<template>
  <div>
    <h3>vue项目中使用图片的方式</h3>
    <div>
      主要会存在的场景是，  后台接口会返回一个状态， 然后动态 几张图片中的一种
    </div>
    <div>
      <el-button type="primary" @click='generatorRandom'>随机产生 0， 1， 2 状态， 从而控制下面图片展示</el-button>
      {{currentStatus}}
    </div>
    <div>
      <h4>使用cdn</h4>
      <img v-show='isReady' :src="imgListForCDN[currentStatus]" @load='handleOnload'>
    </div>
    <div>
      <h4>使用本地图片</h4>
      <img :src="localImgList[currentStatus]">
    </div>
    <div>
      <h4>直接相对路径引用</h4>
      <img src="../../assets/picGroup/0.jpeg">
      <!-- 这种是不行的 -->
      <!-- <img :src="'../../assets/picGroup/'+currentStatus+'.jpeg'"> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {
      currentStatus: '',
      isReady: false,
      imgListForCDN: [
       'http://img.desktx.com/d/file/wallpaper/scenery/20180626/4c8157d07c14a30fd76f9bc110b1314e.jpg',
       'http://img.desktx.com/d/file/wallpaper/scenery/20170120/fdf948c82074494a74bf258eed4f855d.jpg',
       'https://tu1.whhost.net/uploads/20181229/10/1546051605-wWcjCXLymH.jpg'
      ],
      localImgList: []
    }
  },
  created() {
    let arr = []
    let context = require.context('@/assets/picGroup/', false, /\.jpg|jpeg$/)

    let picList = context.keys()

    picList = picList.map(item => item.slice(2))

    for(let i=0; i< 3; i++) {
      arr.push(require(`@/assets/picGroup/${picList[i]}`))
    }

    this.localImgList = arr
  },
  methods: {
    generatorRandom() {
      // 模拟接口状态切换， 将图片线隐藏
      this.isReady = false
      this.currentStatus = parseInt(Math.random() * 3)
    },
    handleOnload() {
      this.isReady = true
    }
  }
}
</script>

<style lang="less" scoped>
img {
  width: 120px;
  height: 70px;
}
</style>
